Fullstack Application Work Flow (MERN)

Basic Explanation Of A Full-stack Application (MERN):-

1. Front-End:- This Is The Client Side Part Of The Application.Frontend is the part of the website users can see and interact with such as the graphical user interface (GUI).Basically We Are Using The React For The Front-End Development.
2. Back-End:- This Is The Server Side Of The Application. It stores and arranges data, and also makes sure everything on the client-side of the website works fine Basically We Are Using The Nodejs For The Back-End Development.

Explanation Of Whole Work Flow Front-End To Back-End:-

When Ever The Client Makes A Request From The Front To Server Which Basically Sitatued In The Backend That Request Must Have To Be Passed Form So Many Processes Before Showing Any Reaction To Client.Now I Would Like To Go Through Each And Every Step Of The Process.

The browser interaction to the backend:-

HTTP requests arrive from the browser at the backend. Those requests may contain data in the HTTP headers or request body. The intent may be to request new data or to transmit user-created data to the backend.

HTTP requests, are constructed inside the user’s browser and sent off. There’s a response for each request, carrying information in the HTTP headers and the request body. Those responses arrive back at the backend arrive back at the user’s browser.

What needs to happen, to make the browser have to send out a request? Those requests which are fired because a user clicked a link or by JS code running in the background. But there are more possible triggers

1. The user enters a URL, which makes the browser go and request it.
2. The browser reads the incoming HTML, and notices that there’s a resource it needs to load, such as a JS file, an image or a CSS file. It goes ahead and requests each with a single new HTTP request. Usually this happens while loading a website. (Those requests don’t have to go to the same backend, you could load JS from another site. People like to use CDNs for that as it’s pretty fast and convenient.)
3. A user clicks on a plain-ol’ link the webpage is loaded and rendered. The browser knows that they need to navigate to a new page and requests the corresponding URL.
4. JavaScript is executed on the site, and wants to have some data loaded in the background. Requests are being made, but the browser does that in the background. It doesn’t reload the whole page. That’s AJAX. Javascript can be triggered by a user clicking something, and it can tell the browser that the click wasn’t meant to navigate to a new page. This can be confusing.

Conclusion Of All Story:

This one can differ! But there’s a very popular way of doing things, which is used most often. It’s a good way of doing things for 99% of all frontend-backend communication scenarios.

The magic is within the HTTP request/response payloads. The backend usually responds with certain contents of the HTTP body:

1. HTML-formatted responses
2. other static files (CSS, JS, images, …)
3. JSON-formatted data
4. No body at all. Just a status code and header fields.

The frontend sends:

1. Simple HTTP requests without a body
2. Form data
3. JSON-formatted data

If You Want To See Example Of Full-stack (MERN) Application Follow The Link Given:- Lets Go Full-stack Applcation Example